<script setup lang="ts">
import { ElMessage } from "element-plus";
import { column } from "element-plus/es/components/table-v2/src/common";
import { watch } from "vue";
import { onMounted, reactive, ref, toRef, toRefs } from "vue";
import { GetRealLog, SaveLineName,GetPageInfo } from "../../api";
import { GetDeviceList, SaveDeviceInfo, GetDeviceName } from "../../api/search";
import { InfoFilled } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
const { t,locale } = useI18n()
import Login from "../Login/Index.vue";

const props = defineProps(["lineValue","pageInfo"]);
const { lineValue, pageInfo } = toRefs(props);
watch(locale, (newLocale, oldLocale) => {
  if (newLocale !== oldLocale) {
    getDeviceNameList();
    getDeviceInfo();
    props.lineValue && getLogInfo();
  }
})

const formInline = reactive({
  user: "",
  region: "",
  date: "",
});

const form = reactive({
  date: "",
  Number: "",
});

const emit = defineEmits(["updateLineName"]);
const lineName = ref("");
const saveLine = () => {
  const post = {
    Line: props.lineValue,
    Name: lineName.value,
  };
  SaveLineName(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    ElMessage.success(res.msg);
    emit("updateLineName");
  });
};
const deviceList = ref<any[]>([]);
const isEdit = ref(false);
const loginRef = ref();
const currentIndex = ref();

const rowClick = (row: any, event: any, column: any) => {
  const { FEntryID } = row;
  //根据当前FEntryID匹配当前索引
  currentIndex.value = deviceList.value.findIndex((item: any) => {
    return item.FEntryID == FEntryID;
  });
  console.log(`output->currentIndex.value`, currentIndex.value);
};

const onAdd = () => {
  //调出登录窗口
  // loginRef.value.open("edit");
  const arrLen = deviceList.value.length;
  const temp = JSON.parse(JSON.stringify(deviceList.value));
  // debugger
  // 如果点击第一行新增 使用unshift
  if (currentIndex.value == 0) {
    temp.unshift({ Name: "" });
    temp[currentIndex.value].FEntryID = Number(
      temp[currentIndex.value + 1].FEntryID
    );
  } else {
    //将当前索引上面的一行赋值空值
    temp.splice(currentIndex.value, 0, { Name: "" });
    temp[currentIndex.value].FEntryID =
      Number(temp[currentIndex.value - 1].FEntryID) + 1;
  }
  //将当前索引以后的fEntryID+1 数组长度+1
  for (let i = currentIndex.value + 1; i < arrLen + 1; i++) {
    temp[i].FEntryID = Number(temp[i].FEntryID) + 1;
  }
  deviceList.value = temp;
};
const onEdit = () => {
  //调出登录窗口
  loginRef.value.open("edit");
};
const onSave = () => {
  const post = {
    FDeviceEntity: deviceList.value,
  };
  console.log(`output->post`, post);
  SaveDeviceInfo(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    ElMessage.success(res.msg);
    getDeviceInfo();
  });
};
const onDel = (index: number) => {
  deviceList.value.splice(index, 1);
  const temp = JSON.parse(JSON.stringify(deviceList.value));
  //将当前索引下面的一行赋值空值
  // temp.splice(currentIndex.value + 1, 0, { fID: "" });
  // temp[currentIndex.value + 1].FEntryID =
  //   Number(temp[currentIndex.value].FEntryID) + 1;
  //将当前索引以后的fEntryID-1 数组长度-1
  for (let i = index; i < temp.length; i++) {
    temp[i].FEntryID = Number(temp[i].FEntryID) - 1;
  }
  deviceList.value = temp;
};
const getDeviceInfo = () => {
  GetDeviceList().then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    deviceList.value = res.data;
  });
};
const logList = ref([]);
const getLogInfo = () => {
  const post = {
    Line: props.lineValue,
    FEntryID: form.Number,
    StartDateTime: form.date[0] || "",
    EndDateTime: form.date[1] || "",
  };
  GetRealLog(post).then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    logList.value = res.data;
  });
};
const deviceNameList = ref([]);
const getDeviceNameList = () => {
  GetDeviceName().then((res: any) => {
    if (res.code !== 200) {
      ElMessage.error(res.msg);
      return;
    }
    deviceNameList.value = res.data;
  });
};
onMounted(() => {
  getDeviceNameList();
  getDeviceInfo();
  props.lineValue && getLogInfo();
});
watch(
  () => props.lineValue,
  (newVal, oldVal) => {
    getLogInfo();
  }
);
const closeLogin = (type: string) => {
  isEdit.value = true;
};
</script>

<template>
  <div class="flex search">
    <div class="row-item w-1/2">
      <el-form :inline="true" class="my-form demo-form-inline line-form flex">
        <el-form-item :label="t('data.lineName')">
          <el-input
            v-model="lineName"
            style="width: 715px"
            clearable
            :placeholder="t('message.plsInputTheLineName')"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="saveLine" class="my-save-btn"
            >{{ t('button.save') }}</el-button
          >
        </el-form-item>
      </el-form>
      <div class="flex items-center mt-2 justify-between">
        <p class="mr-3">{{ t('device.deviceInfo') }}</p>
        <el-form
          :inline="true"
          :model="formInline"
          class="my-form demo-form-inline device-form"
        >
          <el-form-item>
            <el-popover
              placement="top"
              title="参数说明"
              :width="270"
              effect="dark"
              trigger="click"
            >
              1. 品牌：三菱 "SL", 汇川 "HC"<br />
              2. 状态：正常 "1", 托管 "2", 离线"3"
              <template #reference>
                <el-button type="warning" class="m-2">{{ t('button.help') }}</el-button>
              </template>
            </el-popover>
            <el-button
              type="primary"
              @click="onAdd"
              class="mr-2"
              :disabled="!isEdit"
              >{{ t('button.add') }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onEdit" class="mr-2"
              >{{ t('button.edit') }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="onSave" class="mr-2"
              >{{ t('button.save') }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getDeviceInfo">{{ t('button.query') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box mt-2">
        <el-table
          :data="deviceList"
          height="820"
          style="width: 99%"
          @row-click="rowClick"
        >
          <el-table-column
            :label="pageInfo.data.seq"
            align="center"
            width="100"
            show-overflow-tooltip
          >
            <template #default="scope">{{ scope.row.FEntryID }}</template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="pageInfo.data.brand"
            prop="Brand"
            width="100"
            scoped-slot
          >
            <!-- <template #header>
              <el-popover
                placement="top"
                trigger="hover"
                effect="dark"
                :width="160"
              >
              SL：三菱&nbsp;&nbsp;&nbsp;HC：汇川
                <template #reference>
                  <span>品牌</span>
                </template>
              </el-popover>
            </template> -->
            <template #default="scope">
              <el-input v-model="scope.row.Brand" :disabled="!isEdit" />
            </template>
          </el-table-column>
          <!-- <el-table-column
            align="center"
            prop="Brand"
            label="品牌"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-input v-model="scope.row.Brand" :disabled="!isEdit" />
            </template>
          </el-table-column> -->
          <el-table-column
            align="center"
            prop="Name"
            :label="pageInfo.data.name"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-input v-model="scope.row.Name" :disabled="!isEdit" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="IP"
            label="IP"
            width="220"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-input v-model="scope.row.IP" :disabled="!isEdit" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="Port"
            :label="pageInfo.data.port"
            width="100"
            show-overflow-tooltip
          >
            <template #default="scope">
              <el-input v-model="scope.row.Port" :disabled="!isEdit" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="t('status.status')"
            prop="UseStatus"
            width="150"
            scoped-slot
          >
            <template #default="scope">
              <el-select v-model="scope.row.UseStatus" :disabled="!isEdit">
                <el-option :label="t('status.normal')" value="1" />
                <el-option :label="t('status.managed')" value="2" />
                <el-option :label="t('status.offline')" value="3" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="pageInfo.data.operation">
            <template #default="scope">
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                :icon="InfoFilled"
                icon-color="#626AEF"
                title="确定删除吗"
                @confirm="onDel(scope.$index)"
              >
                <template #reference>
                  <el-button type="danger" plain :disabled="!isEdit"
                    >{{ t('button.delete') }}</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="row-item w-1/2">
      <el-form  label-width="120px" :inline="true" :model="form" class="my-form demo-form-inline">
        <el-form-item :label="t('device.logInfo')">
          <el-select
            v-model="form.Number"
            :placeholder="t('message.select')"
            filterable
            clearable
            style="width: 534px"
          >
            <el-option :label="t('message.all')" value="" />
            <el-option
              v-for="(item, index) in deviceNameList"
              :key="index"
              :label="item.Label"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-form
        :inline="true"
        :model="form"
        label-width="120px"
        class="my-form demo-form-inline mt-2"
      >
        <el-form-item :label="t('data.date')">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            range-separator="-"
            :start-placeholder="pageInfo.data.startDate"
            :end-placeholder="pageInfo.data.endDate"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 534px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getLogInfo">{{ t('button.query') }}</el-button>
        </el-form-item>
      </el-form>
      <div class="table-box mt-6">
        <el-table :data="logList" height="820" style="width: 99%">
          <el-table-column
            align="center"
            prop="DateTime"
            :label="pageInfo.data.time"
            width="260"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="OperType"
            :label="pageInfo.data.type"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="Name"
            :label="pageInfo.data.name"
            width="150"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            prop="Description"
            :label="pageInfo.data.description"
            show-overflow-tooltip
          />
        </el-table>
      </div>
    </div>
  </div>
  <Login ref="loginRef" @success="closeLogin" />
</template>
<style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.demo-form-inline .el-form-item {
  margin-bottom: 0;
}

:deep(.demo-form-inline .el-form-item__label) {
  font-size: inherit;
  color: inherit;
  margin-top: 4px;
}

:deep(.table-box .el-input__inner) {
  text-align: center;
}

.table-box {
  :deep(.el-table) {
    font-size: 1.3rem;
    background-color: #141c36;
  }

  :deep(.el-table__empty-block) {
    background-color: #141c36;
  }

  :deep(.el-table th.el-table__cell) {
    background-color: #143452;
    color: #79a0c9;
    font-weight: 600;
  }

  :deep(.el-table .el-table__cell) {
    background: #141c36;
    color: #799ac1;
    border-bottom: 0;
    padding: 0.5rem 0;
  }

  :deep(
      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
    ) {
    background-color: #1f4465;
  }

  :deep(.el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input__inner) {
    color: #799ac1;
    height: 2.6rem;
    color: #799ac1;
    font-size: 1.3rem;
  }

  :deep(.el-table) {
    --el-table-bg-color: none;
  }

  :deep(.el-table tbody .el-table__cell) {
    height: 20px;
    padding: 7px 0;
  }
  :deep(.el-input.is-disabled .el-input__wrapper) {
    background: #1c324f;
    box-shadow: none;
  }

  :deep(.el-input.is-disabled .el-input__inner) {
    -webkit-text-fill-color: #799ac1;
  }
}

:deep(.my-form .el-input__wrapper) {
  background: #1c324f;
  box-shadow: none;
  height: 2.6rem;
}

:deep(.my-form .el-input__inner) {
  height: 2.6rem;
  color: #799ac1;
  font-size: 1.3rem;
}

.my-form {
  :deep(.el-button) {
    font-size: 1.2rem;
    height: 42px;
    padding: 6px 20px;
  }
  :deep(.el-date-editor .el-range-input) {
    font-size: 1.3rem;
  }
  :deep(.el-date-editor .el-range-separator) {
    color: inherit;
  }
  :deep(.el-date-editor .el-range__icon) {
    font-size: 20px;
  }
}
.line-form {
  :deep(.el-form-item) {
    margin-right: 0;
  }
  :deep(.el-button.my-save-btn) {
    margin-left: 24px;
  }
}
.device-form {
  :deep(.el-form-item) {
    margin-right: 18px;
  }
  :deep(.el-form-item:last-child) {
    margin-right: 22px;
  }
  :deep(
      .el-button.is-disabled,
      .el-button.is-disabled:focus,
      .el-button.is-disabled:hover
    ) {
    background-color: var(--el-color-primary);
    border-color: var(--el-color-primary);
  }
}
.table-box {
  :deep(.el-button--danger.is-plain.is-disabled) {
    background-color: var(--el-color-danger);
    border-color: var(--el-color-danger);
    color: #fff;
  }
  :deep(.el-table__empty-text) {
    color: #79a0c9;
  }
}
</style>